<template>
	<div class="active">
		<div class="dianying">
			<van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
		</div>
		<div>
			<img :src="`/api${goodsList.avatar}`" style="width: 100%; height: 300px" />
			<p style="font-size: 23px; font-weight: bold; color: black">{{ goodsList.aliasName }}</p>
			<h5 style="font-size: 16px; margin-top: 5px">{{ goodsList.category }}</h5>
			<!-- <p style="font-size: 14px;">{{ goodsList.director }}</p> -->
			<p style="font-size: 15px; margin-top: 3px">{{ goodsList.description }}</p>
			<!-- <img :src="`/api${goodsList.photos}`" > -->
			<h5 style="margin-top: 5px">{{ goodsList.pubDesc }}</h5>
			<span style="font-size: 17px; font-weight: bold">评分{{ goodsList.score }}</span>
			<p style="font-size: 19px; margin-top: 5px">{{ goodsList.stars }}</p>
			<h5 style="margin-top: 5px; margin-bottom: 8px">{{ goodsList.ver }}</h5>
			<!-- <img v-for="it in Cast" :src="`/api${it}`"> -->
		</div>
		<div style="width: 100%; height: 200px; background-color: #fff"></div>
		<van-submit-bar button-text="加入购物车" @submit="addCart(goodsList)" />
		<div class="return" @click="bindUss"><span class="iconfont icon-gouwuche"></span></div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { RequestDetailsAPI } from '../../api/goods'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../../stores/users'
import { Toast } from 'vant'
import Ajax from '../../api/axios'

const store = useCounterStore()
const onClickLeft = () => history.back()
const goodsList = ref([])
const onSubmit = () => Toast('点击按钮')
const route = useRoute()
const router = useRouter()
const Cast = ref([])
async function bindss() {
	const res = await RequestDetailsAPI(route.query.id)
	if (res.code === 200) {
		const { photos } = res.data
		Cast.value = photos
		goodsList.value = res.data
	}
}
function bindUss() {
	router.push('/cart')
}
function addCart() {
	Ajax({
		url: '/cart/add',
		method: 'POST',
		data: {
            "userId": store.userInfo.id,
            "price":Math.floor(Math.random()*100+50),
            "id": goodsList.value.id,
            "time": Date.now(),
            "count": 1,
            "name": goodsList.value.name,
            "detailaddress": "待支付",
            "bgUrl": goodsList.value.avatar
        }
	}).then(d => {
		console.log(d.code)
		if (d.code === 200) {
			Toast.success('添加成功')
		} else {
			Toast.fail('添加失败')
		}
	})
}
onMounted(() => {
	bindss()
})
</script>

<style lang="scss" scoped>
.dianying {
	position: sticky;
	top: 0;
	z-index: 9;
}
.active {
}
.return {
	position: fixed;
	bottom: 5px;
	right: 0;
	left: 30px;
	z-index: 999;
	width: 45px;
	height: 45px;
	span {
		font-size: 30px;
		color: red;
	}
}
</style>
